<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>流式响应demo</title>-->
<!--    <link rel="stylesheet" type="text/css" href="../../static/css/style.css">-->
<!--    <meta name="viewport" content="width=device-width, initial-scale=1.0" />-->
<!--</head>-->
<!--<body>-->


{% extends 'layout.html' %}

{% load static %}



{% block title %} 服务介绍 {% endblock %}
{% block BodyClass %}page-title{% endblock %}

{% block contect %}

<link href="{% static '/css/style.css' %}" rel="stylesheet">
 <main class="main">

    <!-- Page Title -->
    <div class="page-title" data-aos="fade">
      <div class="container d-lg-flex justify-content-between align-items-center">
        <h1 class="mb-2 mb-lg-0"></h1>
        <nav class="breadcrumbs">
          <ol>
            <li><a href="{% url 'index' %}"></a></li>
            <li class="current"></li>
          </ol>
        </nav>
      </div>
    </div><!-- End Page Title -->

    <!-- Service Details Section -->
    <section id="service-details" class="service-details section">

      <div class="container">

        <div class="row gy-5">

          <div class="col-lg-4" data-aos="fade-up" data-aos-delay="100">

            {% for name in names %}
              <a href="{% url 'service' %}?name={{name}}&pos={{pos}}">{{name}}</a>
            {% endfor %}

            <div class="service-box">
              <h4>聊天记录</h4>
              <div class="services-list">
                {% for item in items %}
                  {% if item == pos %}
                    <a href="{% url 'service' %}?pos={{item}}&name={{Analyse}}" class="active"><i class="bi bi-arrow-right-circle"></i><span>{{item}}</span></a>
                  {% else %}
                    <a href="{% url 'service' %}?pos={{item}}&name={{Analyse}}"><i class="bi bi-arrow-right-circle"></i><span>{{item}}</span></a>
                  {% endif %}
                {% endfor %}
              </div>
            </div><!-- End Services List -->

            <div class="service-box">
              <h4>报告下载</h4>
              <div class="download-catalog">
                <a href="createPdf/{{Analyse}}"><i class="bi bi-filetype-pdf"></i><span>下载 PDF 报告</span></a>
                <a href="createPdf/{{Analyse}}"><i class="bi bi-file-earmark-word"></i><span>下载 DOC 报告</span></a>
              </div>
            </div><!-- End Services List -->

            <div class="help-box d-flex flex-column justify-content-center align-items-center">
              <i class="bi bi-headset help-icon"></i>
              <h4>有其他问题？</h4>
              <p class="d-flex align-items-center mt-2 mb-0"><i class="bi bi-telephone me-2"></i> <span>+86 1348685977</span></p>
              <p class="d-flex align-items-center mt-1 mb-0"><i class="bi bi-envelope me-2"></i> <a href="mailto:contact@example.com">391636309@qq.com</a></p>
            </div>

          </div>

          <div class="col-lg-8 ps-lg-5" data-aos="fade-up" data-aos-delay="200">
            <div class="chat">
              <div class="chat-title">
                <p>小帕树洞</p>
              </div>

              <div class="messages" id="targetElement">
                <div class="message ai-message">
                  <pre>小帕：你好，很高兴为你服务！</pre>
                </div>
              </div>

              <div class="message-box" id="message-box">
                  <textarea placeholder="请在这里输入消息" id="input_question"></textarea>
                  <button onclick="goChat()">发送</button>
              </div>
            </div>
                <script>
                    // 对话
                    function goChat(){
                        let content_obj = document.getElementById('input_question')
                        let content = content_obj.value
                        if(!content){
                            return false
                        }
                        content_obj.value = ''
                        content_obj.focus()
                        insertMessage(true,content,'my-message')
                        readChatbotReply('http://8.152.2.23:8001/post',{'temperature':0.5,'content':content},insertMessage)
                    }

                    function readChatbotReply(url,data,callback){
                        fetch(url, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify(data),
                        })
                       .then(response => response.json())
                       .then(data => {
                            const message = document.getElementById('targetElement');
                            const aiRespose = document.createElement('div');

                            aiRespose.textContent = "小帕：" + data.response;
                            aiRespose.classList.add('message');
                            aiRespose.classList.add('ai-message');

                            message.appendChild(aiRespose);
                            callback(false,data.response);
                        })
                       .catch(error => console.error(error))
                    }
                    // 插入一条聊天内容
                    function insertMessage(first,content,rule='ai-message') {
                        // 获取目标元素
                        let targetElement = document.getElementById("targetElement");
                        // 第一次
                        if(first){
                            // 创建一个div
                            let tempContainer = document.createElement("div");
                            tempContainer.className = `message ${rule}`
                            tempContainer.innerHTML = "<pre>"+content+"</pre>";
                            // 插入内容到目标元素
                            targetElement.appendChild(tempContainer);
                        }
                        else {
                            let divElements = targetElement.querySelectorAll("div");
                            let lastDiv = divElements[divElements.length - 1];
                            if (lastDiv) {
                                // 获取div元素内的p元素
                                let pElement = lastDiv.querySelector("pre");
                                if (pElement) {
                                    // 输出p元素的文本内容
                                    pElement.textContent += content
                                }
                            }
                        }
                    }
                </script>
          </div>

        </div>

      </div>

    </section><!-- /Service Details Section -->

  </main>


{% endblock %}